<script setup>
import { ref } from 'vue'
import { parseSizeString } from '../../../common/index.js'
import { statusColor } from "../../../utils/index.js"
import WIcon from '../../w-icon.vue'

const tagDom = ref()

const props = defineProps({
  type: {
    type: String,
    default: 'info'
  },
  closable: {
    type: Boolean,
    default: false
  },
  effect: {
    type: String,
    default: 'light', // dark light plain
  },
  radius: {
    type: [Number,String],
    default: '2px'
  }
})
const emit = defineEmits(['click' , 'close'])

const handleClose = (tag) => {
  tag.remove()
  emit('close')
}
const handleClick = () => {
  emit('click')
}
</script>

<template>
  <div
      ref="tagDom"
      :class="`bwy-tag__${type}`"
      :style="{
        backgroundColor: effect === 'plain' ? 'none' : effect === 'dark' ? statusColor(type) : '',
        color: effect === 'dark' ? '#fff' : '',
        borderRadius: parseSizeString(radius)
      }"
      @click="handleClick"
  >
    <div class="tag-container">
      <slot></slot>
      <div v-if="closable" class="tag-close" @click="handleClose(tagDom)">
        <w-icon name="close" size="12" :color="statusColor(type)"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@mixin tagStyle {
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  position: relative;
}

.bwy-tag__primary {
  @include tagStyle;
  color: $bwy-primary-color;
  border: 1px solid $bwy-primary-color;
  border-radius: 2px;
  background: $bwy-primary-color-2;
}
.bwy-tag__info {
  @include tagStyle;
  color: $bwy-color-info;
  border: 1px solid $bwy-color-info;
  border-radius: 2px;
  background: $bwy-color-o-info;
}
.bwy-tag__success {
  @include tagStyle;
  color: $bwy-color-success;
  border: 1px solid $bwy-color-success;
  border-radius: 2px;
  background: $bwy-color-o-success;
}
.bwy-tag__warning {
  @include tagStyle;
  color: $bwy-color-warning;
  border: 1px solid $bwy-color-warning;
  border-radius: 2px;
  background: $bwy-color-o-warning;
}
.bwy-tag__danger {
  @include tagStyle;
  color: $bwy-color-danger;
  border: 1px solid $bwy-color-danger;
  border-radius: 2px;
  background: $bwy-color-o-danger;
}
.tag-container {
  z-index: 1;
  display: flex;
  align-items: center;
}
.tag-close {
  margin-left: 4px;
}
</style>
